<template>
	<el-dialog title="任务设置" :visible.sync="visible" width="450px" class="form_dialog_wrapper">
		<el-form label-width="80px" size="medium" class="task_config_wrapper">
			<el-form-item label="任务开关">
				<el-switch v-model="formData.isOpen"></el-switch>
			</el-form-item>
			<el-form-item label="执行方案">
				<el-radio-group v-model="formData.plan">
					<el-radio :label="1">全天执行</el-radio>
					<el-radio :label="2">时段执行</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="请设置开始时间" label-width="120px" v-if="formData.plan === 2">
				<el-time-picker
					is-range
					v-model="formData.timeRange"
					range-separator="~"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					placeholder="选择时间范围"
					style="width: 200px"
				></el-time-picker>
			</el-form-item>
		</el-form>
		<span slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitForm">确定</el-button>
		</span>
	</el-dialog>
</template>

<script>
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			visible: this.value,
			formData: {}
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {
		handleSubmitForm() {
			this.visible = false;
			console.log(this.formData);
		}
	}
};
</script>

<style lang="scss" scoped>
.task_config_wrapper {
	.el-form-item {
		margin-bottom: 12px;
		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>
